<script type="text/javascript" src="/public/js/kendo/src/js/kendo.web.js"></script>
<script type="text/javascript" src="/public/js/kendo/src/js/cultures/kendo.culture.vi-VN.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.common.css">
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.default.css">

<?php
use Core\Config;

$domainItem = $this->domainItem;
$categoryItem = $this->categoryItem;
$currentLang = \Core\Session\FrontSessionHelper::getCurrentLang();
$defaultLanguage = Config::getDefaultLanguage();
$mlCategoryLang = $categoryItem->getMlCategoryLang($currentLang);

?>
<style type="text/css">
    .category_tree_ctn{
        margin: 25px 0px;
    }


</style>
<hr />
<ol class="breadcrumb bc-3">
    <li>
        <a href="/<?php echo $domainItem->domain ?>/admin"><i class="entypo-home"></i>Home</a>
    </li>
    <li>
        <a href="/<?php echo $domainItem->domain ?>/admin">Danh mục</a>
    </li>
    <li class="active">
        <strong><?php echo $mlCategoryLang->name ?></strong>
    </li>
</ol>
<h3>Danh mục <?php echo $mlCategoryLang->name ?></h3>
<br />
<div class="categories_ctn">
    <input class="txtHiddenGroupCode" type="hidden" value="<?php echo $categoryItem->group_code ?>">
    <div style="padding: 10px">
        <div class="category_ctrl_ctn" >
            <a id="btnAddCategory_<?php echo $categoryItem->id ?>" class="btn btn-blue btn-sm" >
                Thêm mới
            </a>&nbsp;&nbsp;
            <a id="btnDeleteCategory_<?php echo $categoryItem->id ?>" class="btn btn-blue btn-sm" >
                Xóa
            </a>&nbsp;&nbsp;
            <a id="btnEditCategory_<?php echo $categoryItem->id ?>" class="btn btn-blue btn-sm" >
                Sửa
            </a>&nbsp;&nbsp;
            <a id="btnUpCategory_<?php echo $categoryItem->id ?>" style="display: none" class="btn btn-blue btn-sm" >
                Up
            </a>&nbsp;&nbsp;
            <a id="btnDownCategory_<?php echo $categoryItem->id ?>" style="display: none" class="btn btn-blue btn-sm">
                Down
            </a>
        </div>
        <div class="category_tree_ctn" id="category_tree_ctn_<?php echo $categoryItem->group_code ?>">

        </div>
    </div>
</div>


<script>
$(document).ready(function(){
    windowHtml = $('#categoryAddWindow').html();
    $('#myWindow').html(windowHtml);
    function loadACategoryGroup(groupCode){
        contentContainer =$('#category_tree_ctn_'+groupCode);
        $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/get-ml-category-group-content'  ?>',
            {groupCode:groupCode}
            ,function(result){
                contentContainer.html(result);
            });
    }

    loadACategoryGroup('<?php echo $categoryItem->group_code ?>');
    $('[id^=btnAddCategory]').click(function(){
        selectedNode = getTreeSelectedNode(treeview)
        data = treeview.dataItem(selectedNode);
        doAdd(data)

    });


    $('[id^=btnEditCategory]').click(function(){
        selectedNode = getTreeSelectedNode(treeview)
        data = treeview.dataItem(selectedNode);
        editCategory(data)

    });

    $('[id^=btnDeleteCategory]').click(function(){
        selectedNode = getTreeSelectedNode(treeview)
        data = treeview.dataItem(selectedNode);
        r=confirm("Bạn có chắc chắn xóa nhóm: "+ data.name )
        if (r==true)
        {
            deleteCategory(data,treeview)
        }


    });
    $('[id^=btnUpCategory]').click(function(){
        selectedNode = getTreeSelectedNode(treeview)
        data = treeview.dataItem(selectedNode);
        upCategory(data,treeview)

    });
    $('[id^=btnDownCategory]').click(function(){
        selectedNode = getTreeSelectedNode(treeview)
        data = treeview.dataItem(selectedNode);
        downCategory(data,treeview)
    });

    $('#myWindow').on('shown.bs.modal', function () {
        $('#myWindow #txtCategoryCode').focus();
    })

    function doAdd(data1){
        if(currentLang != defaultLanguage){
            bootbox.confirm("Bạn cần thêm nhóm Tiếng Việt trước.<br> Bạn có muốn chuyển chức năng này sang Tiếng Việt không?", function(result) {
                if(result)
                    changeLang(defaultLanguage);
            });
            return;
        }

        treeview.select(".k-item:first");
        selectedNode = treeview.select();
        data = treeview.dataItem( selectedNode);

        setWindowTitle('myWindow', 'Thêm danh mục mới ');
        $('#myWindow #spnParentName').html(data.text);
        $('#myWindow #txtCategoryCode').val('');

        $('#myWindow #txtCategoryName').val('');
        $('#myWindow #txtCategoryDescription').val('');
        $('#myWindow #txtParentId').val(data.id);
        $('#myWindow #txtCategoryId').val('');
        $('#myWindow').modal();
    }

    $("#myWindow").keypress(function(event){
        //if the key press is ESC
        if (event.keyCode === 27) {
            $('#myWindow').modal('toggle');
        }

        if(event.keyCode === 13) {
            saveCategory(treeview);
        }
    });

    $('#myWindow #btnSaveCategory').on('click',function(){
        saveCategory(treeview);
    })

    function saveCategory(treeview){
        if(!validateCategorySave())
            return;
        id = $("#myWindow #txtCategoryId").val();
        name = $("#myWindow #txtCategoryName").val();
        code = $("#myWindow #txtCategoryCode").val();
        description = $("#myWindow #txtCategoryDescription").val();
        parentId = $("#myWindow #txtParentId").val();
        $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/save-ml-category'  ?>',
            {name:name,code:code,description:description, id:id,parentId:parentId}
            ,function(result){
                if (result.success){
                    $('#myWindow').modal('toggle');
                    $("#myWindow #spnStatus").html('');
                    selectedNode = getTreeSelectedNode(treeview);
                    categoryId = result.id;
                    if(!id)
                        treeview.append({id:categoryId,
                            name : name,
                            code : code,
                            description : description,
                            text: name,
                            can_delete: 1
                        }, selectedNode);
                    else{

                        dataItem = treeview.dataItem(selectedNode);
                        dataItem.code = code;
                        dataItem.description = description;
                        dataItem.name = name;
                        dataItem.text = name;
                        dataItem.trigger("change", { action: "itemchange", field: "text" });
                    }
                }else{
                    $("#myWindow #spnStatus").html(result.msg);
                }
            },'json');
    }



    function validateCategorySave(){
        if(!$("#myWindow #txtCategoryCode").val()){
            $("#myWindow #spnStatus").html('Vui lòng nhập mã.');
            $("#myWindow #txtCategoryCode").focus();
            return false;
        }

        if(!$("#myWindow  #txtCategoryName").val()){
            $("#myWindow #spnStatus").html('Vui lòng nhập tên.');
            $("#myWindow #txtCategoryName").focus();
            return false;
        }


        return true;
    }
    function editCategory(data){
        if(data.lft == 1) return;
        setWindowTitle('myWindow', 'Sửa danh mục '+data.text);
        $('#myWindow #spnParentName').html('');
        $('#myWindow #txtCategoryCode').val(data.code);

        $('#myWindow #txtCategoryName').val(data.text);
        $('#myWindow #txtCategoryDescription').val(data.description);
        $('#myWindow #txtParentId').val(data.parent_id);
        $('#myWindow #txtCategoryId').val(data.id);
        $('#myWindow').modal();
        if(defaultLanguage != currentLang){
            $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/get-default-ml-category-lang'  ?>',
                {id:data.id}
                ,function(result){
                    if (result.success){
                        $('#myWindow #spnViName').html(result.name);
                        $('#myWindow #spnViDescription').html(result.description);
                    }else{
                    }
                },'json');
        }

    }

    function deleteCategory(data,treeview){
        if(data.lft == 1) return;
        $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/remove-ml-category'  ?>',
            {id:data.id}
            ,function(result){
                if (result.success){
                    selectedNode = getTreeSelectedNode(treeview)
                    treeview.remove(selectedNode);
                    $('[id^=btnUpCategory]').hide();
                    $('[id^=btnDownCategory]').hide();

                    toastr.info('Xóa nhóm: <b>'+ data.name + '</b> thành công', "", opts);
                }else{

                    toastr.error("Lỗi: "+result.msg, "", opts);
                }
            },'json');

    }

    function upCategory(data,treeview){
        $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/up-ml-category'  ?>',
            {id:data.id}
            ,function(result){
                if (result.success){
                    $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/category-ml-list'  ?>',
                        {id:data.id}
                        ,function(result){

                            categoryAsKendoDataSourceJson = result;
                            treeview.setDataSource(categoryAsKendoDataSourceJson);
                            treeview.expand(".k-item");
                            selectedItem = treeview.findByText(data.text);
                            treeview.select(selectedItem);
                        },'json');
                    toastr.info("Tăng thứ tự thành công!", "", opts);
                }else{

                    toastr.error("Lỗi: "+result.msg, "", opts);
                }
            },'json');

    }

    function downCategory(data,treeview){
        $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/down-ml-category'  ?>',
            {id:data.id}
            ,function(result){
                if (result.success){
                    $.post('<?php echo '/'.$domainItem->domain.'/admin/catalog/category-ml-list'  ?>',
                        {id:data.id}
                        ,function(result){

                            categoryAsKendoDataSourceJson = result;
                            treeview.setDataSource(categoryAsKendoDataSourceJson);
                            treeview.expand(".k-item");
                            selectedItem = treeview.findByText(data.text);
                            treeview.select(selectedItem);
                        },'json');
                    toastr.info("Giảm thứ tự thành công!", "", opts);
                }else{

                    toastr.error("Lỗi: "+result.msg, "", opts);
                }
            },'json');
    }
})

function setWindowTitle(ctnId, title){
    $('#'+ ctnId + ' .modal-dialog .modal-content .modal-header h4').text(title)
}


var opts = {
    "closeButton": true,
    "debug": false,
    "positionClass": "toast-bottom-right",
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
};

var currentLang = '<?php echo $currentLang?>';
var defaultLanguage = '<?php echo $defaultLanguage?>';

</script>
<div class="hide" id="categoryAddWindow">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body" >

            <dl>
                <dt style="padding: 5px">
                <div class="row form-group"> Nhóm cha :<span id="spnParentName"></span>
                    <input  id='txtParentId'  name="txtParentId" type="hidden"    value=''>
                </div>
                </dt>
                <dt style="padding: 5px">
                <div class="row form-group">
                    <label class="col-sm-2 control-label" for="txtCategoryCode">Mã(*):</label>
                    <div class="col-sm-6">
                        <input  id='txtCategoryId'  name="txtCategoryId" type="hidden"    value=''>
                        <input  id='txtCategoryCode' class='form-control' name="txtCategoryCode" required  value='' placeholder="Nhập mã, bắt buộc">
                    </div>
                </div>
                </dt>
                <dt style="padding: 5px">
                <div class="row form-group">
                    <label class="col-sm-2 control-label" for="txtCategoryName">Tên(*):</label>
                    <div class="col-sm-6">
                        <input  id='txtCategoryName' class='form-control' name="txtCategoryName" required  value='' placeholder="Nhập tên, bắt buộc">
                        <?php
                            if($currentLang != $defaultLanguage){
                                echo '<br>
                        <div style="padding: 5px">Tên Tiếng Việt: <span style="font-style: normal; color: #005993" id="spnViName"></span></div>';
                            }
                        ?>

                    </div>
                </div>
                </dt>
                <dt style="padding: 5px">
                <div class="row form-group">
                    <label class="col-sm-2 control-label" for="txtCategoryDescription">Mô tả:</label>
                    <div class="col-sm-10">

                        <input  id='txtCategoryDescription' class='form-control' name="txtCategoryDescription"   value=''>
                        <?php
                        if($currentLang != $defaultLanguage){
                            echo '<br>
                        <div style="padding: 5px">Mô tả Tiếng Việt: <span style="font-style: normal; color: #005993" id="spnViDescription"></span></div>';
                        }
                        ?>
                    </div>
                </div>
                </dt>
                <dt style="padding: 5px">
                    <span style="color:red" id="spnStatus"></span>
                </dt>
            </dl>
        </div>
        <div class="modal-footer">
            <a type="button" class="btn btn-default" data-dismiss="modal" >Đóng</a>
            <a type="button" class="btn btn-primary" id="btnSaveCategory">Lưu</a>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>